<#-- @ftlvariable name="layoutItems" type="java.util.List<com.fable.sp.core.domain.LayoutItem>" -->
<#-- @ftlvariable name="layout" type="com.fable.sp.core.domain.Layout" -->
<style>
    #layout-${layout.id} {
        height: ${layout.height}px;
        position: relative;
    <#if layout.style??>${layout.style.toString()}</#if>
    }

    #layout-${layout.id} .layout-item {
        <#if layout.cellBorder??>border: ${layout.cellBorder.toString()};</#if>
        position: absolute;
    }

    .smart-widget {
        margin-bottom: 15px;
    }
</style>
<@ui.styleSheet styleEntitys=layoutItems prefix="layout-item"/>

<div id="container-${layout.containerId}">
    <div class="container-fluid" id="layout-${layout.id}">
        <div class="row">
        <#assign height = layout.cellHeight/>
        <#list layoutItems as item>
            <@ui.styleSheet styleEntitys=item.contents prefix="layout-item-content"/>
            <#assign cfg = item.config/>
            <div class="col-xs-offset-${cfg.x} col-xs-${cfg.width} layout-item layout-item-${item.id}"
                 style="height: ${height*cfg.height}px;top: ${height*cfg.y}px" data-id="${item.id}"
                 id="layout-item-${item.id}">
                <#list item.contents as content>
                        <@ui.itemContent value= content/>
                    </#list>
            </div>
        </#list>
        </div>
    </div>
</div>